<!--
 * @Author: your name
 * @Date: 2020-01-27 17:43:51
 * @LastEditTime: 2020-07-05 11:45:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\dashboard\admin\index.vue
 -->
<template>
  <!-- <div class="container" :style="{height:this.tabHeight,color:'red'}"> -->
  <div class="container" :style="{height:this.tabHeight}">
    <!-- <div class="info">
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>
    <baidu-map class="map" :center="center" :zoom="zoom"></baidu-map>-->
    <panel-group :mainData="mainData" />

    <el-row v-if="checkPermission(['systemAdmin'])">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>未读消息</span>
            <span style="float:right">
              <router-link :to="'/message/list'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="unReadMessageListLoading"
            :data="unReadMessageList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>
            <el-table-column min-width="250px" align="center" label="标题" prop="msgTitle"></el-table-column>
            <el-table-column min-width="200px" align="center" label="消息级别">
              <template slot-scope="scope">
                <span v-if="scope.row.msgLevel == 1">一般</span>
                <span v-if="scope.row.msgLevel == 2">重要</span>
                <span v-if="scope.row.msgLevel == 3">紧急</span>
              </template>
            </el-table-column>
            <!-- <el-table-column min-width="200px" align="center" label="公司名称" prop="companyName"></el-table-column>
            <el-table-column label="发布时间" min-width="100px" prop="startDate"></el-table-column>-->
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>未完成检查</span>
            <span style="float:right">
              <router-link :to="'/check/table/list'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="unaccomplishedTaskListLoading"
            :data="unaccomplishedTaskList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="taskId"></el-table-column>
            <el-table-column min-width="250px" align="center" label="任务名称" prop="taskName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="任务状态" prop="taskStateName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="公司名称" prop="companyName"></el-table-column>
            <el-table-column label="发布时间" min-width="100px" prop="startDate"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>未整改隐患</span>
            <span style="float:right" v-if="checkPermission(['systemAdmin'])">
              <router-link :to="'/danger/trouble'">更多</router-link>
            </span>
            <span style="float:right" v-else>
              <router-link :to="'/enterprise/trouble'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="unRectifyDangerListLoading"
            :data="unRectifyDangerList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>
            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>
            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.strDangerLevel}}</template>
            </el-table-column>
            <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.strdangerRecitfyType}}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>待复查隐患</span>
            <span style="float:right" v-if="checkPermission(['systemAdmin'])">
              <router-link :to="'/danger/trouble'">更多</router-link>
            </span>
            <span style="float:right" v-else>
              <router-link :to="'/enterprise/trouble'">更多</router-link>
            </span>
          </div>
          <el-table
            v-loading="toBeReviewDangerListLoading"
            :data="toBeReviewDangerList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>
            <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
            <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>
            <el-table-column min-width="100px" align="center" label="隐患级别">
              <template slot-scope="{row}">{{row.strDangerLevel}}</template>
            </el-table-column>
            <el-table-column min-width="100px" align="center" label="整改类型">
              <template slot-scope="{row}">{{row.strdangerRecitfyType}}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '../components/PanelGroup'
import {
  fetchTroubleAllInfo,
  fetchUnaccomplishedTask,
  fetchToBeReviewDanger,
  fetchUnRectifyDanger
} from '@/api/dashboard'
import { fetchNewMsgList } from '@/api/message'
import { getBaseDicInfo } from '@/api/baseApi'
// import Pagination from '@/components/Pagination'
import checkPermission from '@/utils/permission'
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      tabHeight: `${document.body.clientHeight - 84}px`,
      // center: { lng: 106.51698, lat: 29.506757 }, //baidu地图
      // zoom: 15, //baidu地图
      mainData: {
        totalTrouble: 0, //总隐患
        nowRectify: 0, //立即整改
        limitRectify: 0, //限期整改
        stopRectify: 0 //停工整改
      },
      troubleGrades: [], //隐患级别
      troubleRectifyTypes: [], //整改类型
      unaccomplishedTaskList: [],
      unReadMessageList: [],
      toBeReviewDangerList: [],
      unRectifyDangerList: [],
      // total: 0,
      unaccomplishedTaskListLoading: true,
      unReadMessageListLoading: true,
      toBeReviewDangerListLoading: true,
      unRectifyDangerListLoading: true
      // listQuery: {
      //   pageIndex: 1,
      //   limit: 10,
      //   pType: 2
      // }
    }
  },
  watch: {
    tabHeight(nval, oval) {
      return nval
    }
  },
  created() {
    //获取所有得隐患统计信息
    this.getTroubleAllInfo()
    // if (checkPermission(['systemAdmin'])) {
    // }
    this.getUnaccomplishedTask()
    this.getUnReadMessage()
    this.getToBeReviewDanger()
    this.getUnRectifyDanger()
  },
  mounted() {
    window.addEventListener('resize', this.resizeImage)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeImage)
  },
  methods: {
    getTroubleAllInfo() {
      fetchTroubleAllInfo()
        .then((response) => {
          if (response.code == '20000') {
            this.mainData.nowRectify = response.data['1']
            this.mainData.limitRectify = response.data['2']
            this.mainData.stopRectify = response.data['3']
            this.mainData.totalTrouble =
              Number(response.data['1']) +
              Number(response.data['2']) +
              Number(response.data['3'])
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getUnaccomplishedTask() {
      fetchUnaccomplishedTask()
        .then((response) => {
          if (response.code == '20000') {
            this.unaccomplishedTaskList = response.data
          }
          this.unaccomplishedTaskListLoading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getUnReadMessage() {
      fetchNewMsgList({
        curPage: 1,
        pageSize: 10,
        queryName: '',
        userId: this.$store.getters.userId
      })
        .then((response) => {
          if (response.code == '20000') {
            this.unReadMessageList = response.data.records
          }
          this.unReadMessageListLoading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getToBeReviewDanger() {
      fetchToBeReviewDanger()
        .then((response) => {
          if (response.code == '20000') {
            this.toBeReviewDangerList = response.data
          }
          this.toBeReviewDangerListLoading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getUnRectifyDanger() {
      let ptype = 2
      if (!checkPermission(['safeManager', 'legalPerson'])) {
        ptype = 1
      }
      fetchUnRectifyDanger({ ptype })
        .then((response) => {
          if (response.code == '20000') {
            this.unRectifyDangerList = response.data
          }
          this.unRectifyDangerListLoading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    checkPermission,
    resizeImage() {
      this.tabHeight = `${document.body.clientHeight - 84}px`
    }
    // getTroubleGradesList() {
    //   getBaseDicInfo({ typeId: 2 }).then((response) => {
    //     this.troubleGrades = response.data
    //   })
    // },
    // getRectifyTypeList() {
    //   getBaseDicInfo({ typeId: 1 }).then((response) => {
    //     this.troubleRectifyTypes = response.data
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.container /deep/ .el-card__header {
  background: #42b983;
  color: #fff;
}
// .container /deep/ .el-card__body {
//   height: 300px;
// }
.map {
  width: 100%;
  height: 100%;
}
.info {
  width: 300px;
  height: 200px;
  background: #fff;
  position: absolute;
  z-index: 99999;
  left: 50px;
  top: 20px;
}
.container {
  position: relative;
  // background-image: url('~@/assets/images/xijinping.jpg');
  // background-size: 100% 100%;
  // height: 653px;
}

.box-card {
  width: 97%;
  margin: 10px;
}
</style>
